<template lang="">
  <div class="userInfo-wrap">
      <!-- 头部 -->
        <mine-header>
              {{title}}
        </mine-header>
        <!-- 头像 -->
          <div class="userInfo">
            <div class="avatar"></div>
            <span>修改头像</span>
          </div>
          <!-- 菜单选项 -->
          <form @submit.prevent="commit" class="form-list">
            <div class="form-item">
              <label for="gender">性别</label>
              <input type="text" v-model="userInfo.gender"   name="gender" id="gender" required>
            </div>
            <div class="form-item">
              <label for="age">年龄</label>
              <input type="text" v-model="userInfo.age"  name="age" id="age"required>
            </div>
            <div class="form-item">
              <label for="hometown">家乡</label>
              <input type="text" v-model="userInfo.hometown"  name="hometown" id="hometown" required>
            </div>
            <div class="form-item">
              <label for="industry">行业</label>
              <input type="text" v-model="userInfo.industry" name="industry" id="industry" required>
            </div>
            <div class="form-item">
              <label for="hobby">兴趣爱好</label>
              <input type="text" name="hobby" id="hobby" v-model="userInfo.hobby" required>
            </div>
          </form>
              <!-- 修改 -->
            <div class="commit">
                <button @click="btnAction">提交</button>
            </div>
  </div>
</template>
<script>
import {userInfonApi,modifyUserInfonApi} from "@/api/mine"
import MineHeader from "@/views/Mine/com/mine-header.vue"
import user from '@/store/modules/user'
import { Toast } from 'vant'
export default {
  name: "user-info",
  components: {
      [MineHeader.name]:MineHeader
  },
  data() {
    return {
      title: '个人资料',
      userInfo:{},//数据格式在后端
  }
  },
  created() {
   //在这里根据用户id获取信息，渲染
   this.getuserinfodata()
  },
  methods: {
    //请求用户数据进行渲染
    async getuserinfodata() {
    // console.log(user.state.userInfo._id);
      const _idinfo = {
        _id: user.state.userInfo._id,
        token:localStorage.getItem("token")
      }
      let res = await userInfonApi(_idinfo)
      this.userInfo=res.data.userinfo
    },
   
      //提交按钮
    async btnAction() {
      let info = this.userInfo
      const _idinfo = {
        _id: user.state.userInfo._id,
       token:localStorage.getItem("token"),
        info
      }
      //点击时获取表单的值，发送请求根据id进行修改
      //修改完成弹出提示
      let res = await modifyUserInfonApi(_idinfo)
      if (res.error === null) {
        Toast(`${res.data.message}`)
      }
    }
  }, 
}
</script>
<style lang="scss" scoped>
  .userInfo-wrap{
  width: 100%;
  height: 100%;
  background-color:#f4f6f9;
  position: absolute;
  top: 0;
  z-index: 9;

  .userInfo{
    margin-top:10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid #b3b4c7;
    background-color: #fff;
      .avatar{
      height: 80px;
      width: 80px;
      background-color: lightgreen;
      border-radius: 50%;
      margin: 10px;
   }
   span{
    padding: 10px;
    font-size: 16px;
    color: #6B6E87;
   }
 
  }
    /* 菜单选项 */
    .form-list{
      width: 100%;
      .form-item{
          height: 45px;
          display: flex;
          flex-direction: row;
          align-items: center;
          border-bottom: 1px solid #b3b4c7;
          border-top: 1px solid #b3b4c7;
          background-color: #fff;
          label{
            font-size: 14px;
            color: #32354A;
            padding: 10px;
            font-weight: 400;
            width: 80px;
          }
          input{
            flex: 1;
            font-size: 14px;
            color: #32354A;
            font-weight: 400;
            padding-right: 20px;
             height: 30px;
             border: 0;
             line-height: 100%;
            outline:medium
          }
      } 
  }
   .commit{
        width: 100%;
        padding-top: 15px;
        text-align: center;
        button{
        margin: auto;
        padding: 0;
        width: 274px;
        height: 44px;
        background-color: #4a73ff;
        color:#fff;
        border: 1px #4A73FF solid;
        border-radius: 5px;
        font-size: 16px;
      }
    }
}
</style>